<template>
  <view class="login">
    <up-navbar title="" placeholder bgColor="transparent" :leftIcon="null">
    </up-navbar>
    <view class="nesting">
      <image src="/static/login/nesting.png" mode="" />
    </view>
    <view class="switchLanguages" @click="isShowPoup = true">
      <image src="/static/login/languages.png" mode="" />
      <text>{{ $t("locale.type") }}</text>
    </view>

    <!-- logo -->
    <view class="login-info">
      <image class="logo" src="/static/logo.png" mode="" />

      <up-form
        labelPosition="left"
        :model="loginInfo"
        :rules="rules"
        ref="uFormRef"
      >
        <up-form-item prop="username" borderBottom>
          <!-- placeholder="请输入账号" -->
          <up-input
            v-model="loginInfo.username"
            prefixIcon="account"
            prefixIconStyle="font-size: 40upx;color: #FFF"
            class="loginInfo-input"
            :placeholder="$t('login.pleaseEnterAccount')"
            border="none"
            color="#fff"
            :clearable="true"
          ></up-input>
        </up-form-item>
        <up-form-item prop="password" borderBottom>
          <!-- placeholder="请输入密码" -->
          <up-input
            v-model="loginInfo.password"
            :type="showPassword ? 'text' : 'password'"
            class="loginInfo-input"
            :placeholder="$t('login.pleaseEnterPassword')"
            color="#fff"
            prefixIconStyle="font-size: 40upx;color: #FFF"
            prefixIcon="lock"
          >
            <template #suffix>
              <image
                src="/static/login/eye.png"
                style="width: 28upx"
                mode="widthFix"
                @click="showPassword = !showPassword"
              />
            </template>
          </up-input>
        </up-form-item>

        <up-form-item prop="code" borderBottom>
          <!-- placeholder="请输入校验码" -->
          <up-input
            :placeholder="$t('login.pleaseEnterCode')"
            v-model="loginInfo.code"
            class="loginInfo-input"
            color="#fff"
            prefixIconStyle="font-size: 40upx;color: #FFF"
          >
            <template #prefix>
              <view style="padding-top: 10upx">
                <image
                  src="/static/login/shield.png"
                  style="width: 34upx"
                  mode="widthFix"
                  @click="showPassword = !showPassword"
                />
              </view>
            </template>
            <template #suffix>
              <jp-verification-literalness
                @getCode="getCode"
                :securityCode="codeData"
                contentWidth="80"
                contentHeight="35"
                backgroundColor="#222D49"
              ></jp-verification-literalness>
            </template>
          </up-input>
        </up-form-item>

        <up-form-item borderBottom>
          <!-- text="登录" -->
          <up-button
            type="primary"
            class="btn-submit"
            :text="$t('login.btnLogin')"
            :disabled="!checkboxType"
            @click="handleLoginApi"
          ></up-button>
        </up-form-item>
      </up-form>

      <view class="select-checkbox">
        <up-checkbox-group
          v-model="checkboxValue"
          placement="column"
          @change="checkboxChange"
          :checked="true"
        >
          <up-checkbox
            :customStyle="{
              marginRight: '5upx',
              marginTop: '0',
              marginBottom: '0',
            }"
            activeColor="#64B7F6"
            size="15"
            label=""
            name="check"
          >
          </up-checkbox>
        </up-checkbox-group>
        <view class="checkout-text">
          <!-- 已阅读并同意 -->
          <!-- 用户协议 -->
          <!-- 和 -->
          <!-- 隐私协议 -->
          {{ $t("enrollPage.readsAndAgrees") }}
          <text
            class="agreement"
            @click="goAgreement('userAgreement', $t('privacy.userAgreement'))"
            >《{{ $t("login.userAgreement") }}》</text
          >
          {{ $t("login.and") }}
          <text
            class="agreement"
            @click="
              goAgreement('privacyAgreement', $t('privacy.privacyAgreement'))
            "
            >《{{ $t("login.privacyAgreement") }}》</text
          >
        </view>
      </view>

      <!-- 底部按钮 -->
      <view class="btns">
        <view class="btns-item">
          <view class="image" @click="enroll">
            <image
              src="/static/login/phone.png"
              style="width: 24upx"
              mode="widthFix"
            />
          </view>
          <view class="btns-item-text" @click="enroll">
            <!-- 注册 -->
            {{ $t("login.enroll") }}
          </view>
        </view>
        <view class="btns-item btns-item-center">
          <view class="image" @click="forgotPassword">
            <image
              src="/static/login/password.png"
              style="width: 34upx"
              mode="widthFix"
            />
          </view>
          <view class="btns-item-text" @click="forgotPassword">
            <!-- 忘记密码 -->
            {{ $t("login.forgotPassword") }}
          </view>
        </view>
        <!-- 联系我们 -->
        <!-- <view class="btns-item">
          <view class="image" @click="contactUs">
            <image
              src="/static/login/customer.png"
              style="width: 37upx"
              mode="widthFix"
            />
          </view>
          <view class="btns-item-text" @click="contactUs">
            {{ $t("login.contactUs") }}
          </view>
        </view> -->
      </view>
    </view>
    <multilingual
      :isShowPoup="isShowPoup"
      :applicationLocale="applicationLocale"
      @handleSetLocale="handleSetLocale"
      @handleClose="isShowPoup = false"
    />
    <agreementPopUpBox
      :isShowPrivacy="isShowPrivacy"
      @handleAgree="handleAgree"
    />
  </view>
</template>

<script>
import { useAppStore } from "@/store/app";
import { useLocaleStore } from "@/store/locale";
import apis from "@/apis/index.js";

export default {
  data() {
    return {
      rules: {
        username: [
          {
            required: true,
            message: this.$t("login.pleaseEnterAccount"),
            trigger: ["change", "blur"],
          },
          {
            validator: async (rule, value, callback) => {
              const regex = /^(?=.*[a-zA-Z0-9])[a-zA-Z0-9\W_]+$/;
              if (!regex.test(value)) {
                callback(
                  new Error(
                    this.$t("login.accountMustBeEnglishOrEnglishAndNumbers")
                  )
                );
                return;
              }
            },
            trigger: ["change", "blur"],
          },
        ],
        password: {
          required: true,
          message: this.$t("login.pleaseEnterPassword"),
          trigger: ["blur", "change"],
        },
        code: {
          required: true,
          message: this.$t("login.pleaseEnterCode"),
          trigger: ["blur", "change"],
        },
      },
      applicationLocale: "",
      isShowPoup: false,
      showPassword: false,
      isShowPrivacy: false,
      checkboxType: true,
      checkboxValue: ["check"],
      loginInfo: {
        username: "",
        password: "",
        code: "",
      },
      codeData: "",
    };
  },
  onShow() {
    const appStore = useAppStore();
    if (appStore.isLogin) {
      this.backPage();
    }
  },
  onLoad() {
    const localeStore = useLocaleStore();
    const { applicationLocale } = localeStore;
    this.applicationLocale = applicationLocale;
    this.getCode();
    this.isShowAgreement();
  },
  methods: {
    goAgreement(params, name) {
      uni.navigateTo({
        url: `/pages/agreement/agreement?type=${params}&title=${name}`,
      });
    },
    isShowAgreement() {
      const store = useAppStore();
      const { GETInAppType } = store;
      if (!GETInAppType) {
        this.isShowPrivacy = true;
      }
    },
    handleAgree() {
      const store = useAppStore();
      const { SetInAppType } = store;
      this.isShowPrivacy = false;
      SetInAppType(true);
    },
    getCode() {
      apis.getLoginEmailCode().then((res) => {
        console.log("res", res);
        this.codeData = res.data;
      });
    },

    handleSetLocale(params) {
      this.applicationLocale = params;
    },
    checkboxChange(e) {
      if (!e || e.length < 1) {
        this.checkboxType = false;
      } else {
        this.checkboxType = true;
      }
    },
    handleLoginApi() {
      this.$refs.uFormRef.validate().then((valid) => {
        if (valid) {
          let params = {
            password: this.loginInfo.password,
            username: this.loginInfo.username,
            code: this.loginInfo.code,
          };
          apis
            .login(params)
            .then((res) => {
              const store = useAppStore();
              const { SetAppToken } = store;
              SetAppToken(res.data);
              store.refreshUserInfo();
              this.backPage();
            })
            .catch((error) => {
              console.log("errorerrorerror", error);
            });
        }
      });
    },
    backPage() {
      // 解决深页面跳转后到登陆造成的页面堆栈太多占用内存
      const pages = getCurrentPages();
      console.log(pages);
      if (pages.length > 1) {
        uni.navigateBack({
          delta: pages.length - 1,
        });
      } else {
        uni.switchTab({
          url: "/pages/dashboard/dashboard",
        });
      }
    },
    // 注册
    enroll() {
      console.log("注册");
      uni.navigateTo({
        url: "/pages/enroll/enroll",
      });
    },
    // 忘记密码
    forgotPassword() {
      console.log("忘记密码");
      uni.navigateTo({
        url: "/pages/forgotPassword/forgotPassword",
      });
    },
    // 联系我们
    contactUs() {
      uni.navigateTo({
        url: "/pages/contact-us/contact-us",
      });
      console.log("联系我们");
    },
  },
};
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, #172c40, #08121e);
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0 30upx 50upx 30upx;
  box-sizing: border-box;

  .nesting {
    width: 960upx;
    height: 1320upx;
    position: absolute;
    top: -100upx;
    left: 145upx;
    /* 让点击事件穿透该元素 */
    pointer-events: none;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .switchLanguages {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    image {
      width: 24upx;
      height: 24upx;
      margin-right: 10upx;
    }

    text {
      position: static;
      font-size: 28upx;
    }
  }

  .login-info {
    width: 100%;
    padding: 160upx 30upx 0 30upx;
    box-sizing: border-box;
    text-align: center;

    .logo {
      width: 164upx;
      height: 164upx;
      margin: 0 auto;
    }

    .loginInfo-input {
      width: 100%;
      height: 88upx;
      background-color: #222d49;
      border-radius: 150upx;
      z-index: 1;
      padding: 0 36upx !important;
      box-sizing: border-box;
    }

    :deep(.u-form-item__body__right__message) {
      text-align: left;
    }

    .btn-submit {
      width: 100%;
      height: 88upx;
      border-radius: 150upx;
      border: none;
      font-family: Alibaba PuHuiTi 3;
      font-size: 32upx;
      font-weight: 500;
      text-align: center;
      font-variation-settings: "opsz" auto;
    }

    .select-checkbox {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .checkout-text {
        font-family: Alibaba PuHuiTi 2;
        font-size: 24upx;
        font-variation-settings: "opsz" auto;
        /* 白 */
        color: #ffffff;

        .agreement {
          font-family: Alibaba PuHuiTi 2;
          font-weight: 400;
          font-size: 24upx;
          font-variation-settings: "opsz" auto;
          border-bottom: 1px solid #fff;
        }
      }
    }

    .btns {
      width: 100%;
      margin-top: 100upx;
      display: flex;
      // justify-content: flex-start;
      justify-content: space-between;
      align-items: flex-start;

      .btns-item {
        width: 33.33%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .image {
          width: 96upx;
          height: 96upx;
          border: 1px solid #202934;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 24upx;
        }
      }

      .btns-item-text {
        font-family: Alibaba PuHuiTi 3;
        font-size: 28upx;
        font-variation-settings: "opsz" auto;
        color: #eeeeee;
      }
    }
  }
}
</style>
